<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>金牌小卫士</title>
		<link href="plugin/date/date.css" rel="stylesheet">
		<link href="bootstrap/css/bootstrap3.min.css" rel="stylesheet">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="css/nav.css" />
		<style>
			.form-group-update {
				margin-right: 2%;
			}
		</style>
	</head>

	<body>
		<!--导航-->
	    <nav class="navbar navbar-inverse">
	      <div class="container-fluid">
	        <div class="navbar-header">
	          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
	            <span class="sr-only">Toggle navigation</span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
		          	<a class="navbar-brand" href=""><img src="images/admin_logo.png" alt=""></a>
	        </div>

	        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
	          <ul class="nav navbar-nav" id="nav">
				  
	          </ul>
	          <ul class="nav navbar-nav navbar-right">
	            <li class="dropdown">
	              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">欢迎您：<span id="uname"></span><span class="caret"></span></a>
	              <ul class="dropdown-menu" role="menu">
	                <li><a href="change_pass.html">修改密码</a></li>
	                <li><a id="loginOut" href="#">退出登陆</a></li>
	              </ul>
	            </li>
	          </ul>
	        </div>
	      </div>
	    </nav>
		<div class="container-fluid">
			<div class="row bcert-box">
				<ol class="breadcrumb">
				  <li><a href="javascript:;">主页</a></li>
				  <li>会员管理</li>
				  <li class="active">金牌小卫士</li>
				</ol>
		<form class="form-inline searchForm">
			<div class="form-group">
				<!--<label for="exampleInputName2">Name</label>-->
				<input type="text" class="form-control" id="userName" placeholder="姓名">
			</div>
			<div class="form-group">
				<!--<label for="exampleInputEmail2">Email</label>-->
				<input type="text" class="form-control" id="tel" placeholder="手机号">
			</div>
			<div class="form-group">
				<label for="startTime" class="sr-only">开始时间</label>
				<input id="startTime" class="form-control" placeholder="请选择开始日期" name="startTime" readonly title="错误" data-container="body" data-toggle="popover" data-placement="bottom" data-content="开始时间不能大于结束时间!">
			</div>
			~
			<div class="form-group">
				<label for="endTime" class="sr-only">结束时间</label>
				<input id="endTime" class="form-control" placeholder="请选择结束日期" name="stopTime" readonly>
			</div>
			<button type="button" class="btn btn-primary btn-success" id="Reset"></span>重置</button>
			<button type="button" class="btn btn-primary btn-default" id="QueryBtn">查询</button>
		</form>
		<div class="table">
			<table class="table table-bordered table-striped" id="tableData">
			</table>
		</div>
		<!-- 分页 -->
		  <nav aria-label="...">
			<div class="">
			  <span id="pageNum">共&nbsp;<strong></strong>&nbsp;页&nbsp;/&nbsp;</span><span id="totalNum">&nbsp;<strong>0</strong>&nbsp;条数据</span>
			</div>
			<ul id="example"></ul>
		  </nav>
	</div>
	</div>
	</body>
</html>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="plugin/layer/layer.js"></script>
<script type="text/javascript" src="js/cookie.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-paginator.js"></script>
<script type="text/javascript" src="plugin/date/date.js"></script>
<script type="text/javascript" src="plugin/date/date.zh-CN.js"></script>
<script>
	function UrlSearch() {
		var name, value;
		var str = location.href; //取得整个地址栏;
		var num = str.indexOf("?")
		str = str.substr(num + 1); //取得所有参数   stringvar.substr(start [, length ]

		var arr = str.split("&"); //各个参数放到数组里
		for(var i = 0; i < arr.length; i++) {
			num = arr[i].indexOf("=");
			if(num > 0) {
				name = arr[i].substring(0, num);
				value = arr[i].substr(num + 1);
				this[name] = value;
			}
		}
	}
	var Request = new UrlSearch(); //实例化
	var memberId = Request.id;

	$("document").ready(function() {
		integralListPaga()
		// inputEmpty()
	});

	//分页
	function integralListPaga() {
		$.ajax({
			//分页
			url: serverURL + '/member/queryGoldGuardian',
			type: "post",
			data: {
				'memberName': $('#userName').val(),
				'memberMobile': $('#tel').val(),
				'memberId': memberId,
				'startTime': $('#startTime').val(),
				'endTime': $('#endTime').val(),
				'page': page,
				'pageSize': pagesize
			},
			dataType: "json",
			success: function(data) {
				if(data.code == 200) {
					integralList = data.data;
					OpendList(integralList);
					$('#pageNum strong').html('0')
					$('#totalNum strong').html('0')
					$('#totalNum strong').html(data.data.count)
					if(data.data.count >= 1) {
						var pageCount = Math.ceil(data.data.count / pagesize); //取到pageCount的值
						$('#pageNum strong').html(pageCount)
						var currentPage = page; //得到urrentPage
					} else if(data.data.count == 0) {
						$('#pageNum strong').html('0')
						$("#example").empty();
						return false;
					}
					var options = {
						bootstrapMajorVersion: 3, //版本
						currentPage: currentPage, //当前页数
						totalPages: pageCount, //总页数
						itemTexts: function(type, page, current) {
							switch(type) {
								case "first":
									return "首页";
								case "prev":
									return "上一页";
								case "next":
									return "下一页";
								case "last":
									return "末页";
								case "page":
									return page;
							}
						}, //点击事件，用于通过Ajax来刷新整个List列表
						onPageClicked: function(event, originalEvent, type, page) {
							$.ajax({
								url: serverURL + '/member/queryGoldGuardian',
								type: "post",
								dataType: "json",
								data: {
									'memberName': $('#userName').val(),
									'memberMobile': $('#tel').val(),
									'memberId': memberId,
									'startTime': $('#startTime').val(),
									'endTime': $('#endTime').val(),
									'page': +page,
									'pageSize': pagesize
								},
								success: function(data1) {
									console.log(data1.data);
									if(data1.code == 400) {
										alert("登陆超时请重新登陆")
										window.location.href = "login.html";
									}
									var integralList = data1.data;
									OpendList(integralList);
								}
							});
						}

					};
					$('#example').bootstrapPaginator(options);
					// inputEmpty(); //条件初始化
				} else if(data.code == 400) {
					alert("登陆超时请重新登陆")
					window.location.href = "login.html";
				}
			}
		});
	}

	//数据渲染
	function OpendList(integralList) {
		var result = '';
		$('#tableData').empty();
		$('#tableData').append(
			'<tr>' +
			'<th>序号</th>' +
			'<th>姓名</th>' +
			'<th> 手机号</th>' +
			'<th>被推荐人等级</th>' +
			'<th>注册时间</th>' +
			'</tr>'
		);
		for(var i = 0; i < integralList.list.length; i++) {
			var num = i+1
			result +=
				'<tr>' +
				'<td>' + num + '</td>' +
				'<td>' + integralList.list[i].memberName + '</td>' +
				'<td>' + integralList.list[i].memberMobile + '</td>' +
				'<td>' + integralList.list[i].memberType + '</td>' +
				'<td>' + integralList.list[i].memberTime + '</td>' +
				'</tr>'
		}
		$('#tableData').append(result)

	}
	//查询
	$('#QueryBtn').click(function() {
		integralListPaga()
	})

	function compareDate(startTime, endTime) {
		return new Date(startTime).getTime() > new Date(endTime).getTime();
	}

	function checkStartAndEndTime() {
		if(compareDate($('#startTime').val(), $('#endTime').val())) {
			$('#startTime').addClass("card-warning");
			$('#startTime').popover('show');

		} else {
			$('#startTime').removeClass("card-warning");
			$('#startTime').popover('hide')
		}
	}

	//时间选择
	$("#startTime").datetimepicker({
		format: "yyyy-mm-dd",
		autoclose: true,
		todayBtn: true,
		todayHighlight: true,
		//  endTime:new Date(),
		showMeridian: true,
		pickerPosition: "bottom-left",
		language: 'zh-CN', //中文，需要引用zh-CN.js包
		startView: 2, //月视图
		minView: 2, //日期时间选择器所能够提供的最精确的时间选择视图
	}).change(function() {
		checkStartAndEndTime();
	});
	$("#endTime").datetimepicker({
		format: "yyyy-mm-dd",
		autoclose: true,
		todayBtn: true,
		todayHighlight: true,
		//  endTime:new Date(),
		showMeridian: true,
		pickerPosition: "bottom-left",
		language: 'zh-CN', //中文，需要引用zh-CN.js包
		startView: 2, //月视图
		minView: 2, //日期时间选择器所能够提供的最精确的时间选择视图
	}).change(function() {
		checkStartAndEndTime();
	});
</script>
